import React from 'react'
import * as echarts from 'echarts';
import { Toast, NavBar } from 'react-vant';
import {useRef,useEffect} from "react"
import {lineoption} from "../options/index.js"
import * as action from "../action"
import {useDispatch,useSelector} from "react-redux"
// export default 导出的东西在引入得时候只要路径对，引入得时候想叫什么名字叫什么名字
// export 抛出的东西导抛出的叫什么名字导入的时候必须叫什么名字，同时，导入的时候要加{}
const Style = {
    "width":"100%",
    "height":"260px",
}
function Line() {
    let myChart = null;
    let dispatch = useDispatch()
    let store = useSelector((state)=>({...state.appreducer}))
    let myref = useRef(null)
    useEffect(()=>{ // 相当于类组件的componetDidmounted
        dispatch(action.getdata())
      
        // lineoption.series.data = store.arr
        // lineoption && myChart.setOption(lineoption);
    },[])
    useEffect(()=>{
      
        myChart = echarts.init(myref.current);
        lineoption.series[0].data = store.arr
        console.log("render");
        myChart && myChart.setOption(lineoption);
    },[store.arr])

    return (
        <div>
            {/* <NavBar
                title="近七天统计图"
                leftText="返回"
                rightText="按钮"
                onClickLeft={() => Toast('返回')}
                onClickRight={() => Toast('按钮')}
            /> */}
            <div className='data-title'>
                <span>2021-01-28</span>
                <span>至</span>
                <span>2021-02-03</span>
            </div>
            <div style={Style} ref={myref}> </div>
            <div>
                {
                    store.linearr &&  store.linearr.length ?  store.linearr.map((item,index)=>{
                        return <div key={index} className="card-box">
                              <p>体重:{item.weight}</p>
                              <p>测量时间:{item.date}</p>
                              <p>数据来源：{item.origin}</p>
                        </div>
                    }):"暂无数据"
                }
            </div>
           
        </div>
    )
}

export default Line